<template>
	<div>
		<div class="bg-white pd-25 flex-s-s" :class="type" @click="goDetail(bussinessItem)">
			<img-box class="is-170 br-10 flex-s-0" :img-url="bussinessItem.Logo" />

			<!-- 联盟商家列表项start -->
			<div v-if="type === 'alliance'" class="flex-g-1 pos-r max-width">
				<p class="fs-32 lh-xs toe pb-5 fw-500">{{ bussinessItem.Name }}</p>
				<p v-if="bussinessItem.BusinessHours" class="fs-24 color-gray-light">营业时间：{{ bussinessItem.BusinessHours }}</p>
				<div v-if="bussinessItem.TagsList" class="pos-a flex bottom-0 flex-wrap max-height">
					<span v-for="(item, index) in bussinessItem.TagsList" :key="index" class="shopTag">{{ item.Name }}</span>
				</div>
			</div>
			<span v-if="bussinessItem.distance && type === 'alliance'" class="fs-24 color-gray-light pt-42 flex-s-0 distance">{{
				$utils.distanceChange(bussinessItem.distance) === '距离未知' ? null : $utils.distanceChange(bussinessItem.distance)
			}}</span>
			<!-- 联盟商家列表项end -->

			<!-- 附近门店/关注门店列表项start -->
			<div v-if="type === 'nearbyStore'" class="flex-g-1 pos-r flex-s-fs flex-d-c max-width">
				<div class="flex-s-c full-width">
					<div class="flex-g-1 name-box">
						<p class="fs-32 toe  pb-5 fw-500">{{ bussinessItem.Name }}</p>
					</div>
					<van-button round :plain="bussinessItem.isLike" type="primary"
						:class="bussinessItem.isLike ? 'isLike' : 'notLike'" @click.stop="like">{{ bussinessItem.isLike ? '取关' : '关注'
						}}</van-button>
				</div>
				<p class="fs-24">
					<a :href="'tel:' + bussinessItem.ContactTel">
						<span class="pr-20">电话：{{ bussinessItem.ContactTel ? bussinessItem.ContactTel : '未知' }}</span>
						<svg-icon icon-class="tel1" class="fs-26 color-primary" />
					</a>
				</p>
				<p class="fs-24">
					<span v-if="utils.distanceChange(bussinessItem.distance)" class="pr-20">距离：{{
						$utils.distanceChange(bussinessItem.distance) }}</span>
					<svg-icon icon-class="address" class="fs-26 color-primary" />
				</p>
				<P class="fs-24 color-gray-light pos-r arrow">
					<span>地址：{{ bussinessItem.DetailAddress ? bussinessItem.DetailAddress : '未知' }}</span>
				</P>
			</div>
			<!-- 附近门店/关注门店列表项end -->

			<!-- 商家详情start -->
			<div v-if="type === 'detail' || type === 'info'" class="flex-g-1 pos-r max-width">
				<p class="fs-32 toe pb-5 fw-500" @click="goInfo(bussinessItem)">{{ bussinessItem.Name }}</p>
				<p class="fs-24 text-show-line-2">{{ bussinessItem.Description }}</p>
				<div v-if="bussinessItem.TagsList" class="pos-a flex bottom-0 flex-wrap max-height">
					<span v-for="(item, index) in bussinessItem.TagsList" :key="index" class="shopTag">{{ item.Name }}</span>
				</div>
			</div>
			<!-- 商家详情end -->
		</div>

		<!-- 商家详情start -->
		<div v-if="type === 'info'" class="flex-s-c plr-25">
			<p class="fs-24 color-gray-light">营业时间：{{ bussinessItem.BusinessHours ? bussinessItem.BusinessHours : '未知' }}</p>
			<a :href="'tel:' + bussinessItem.ContactTel">
				<svg-icon icon-class="tel" class="fs-26" />
			</a>
		</div>
		<p v-if="type === 'info'" class="fs-24 color-gray-light mt-10 mb-25 plr-25 pr-50 pos-r arrow"
			@click.stop="navigation">
			<span>地址：{{ bussinessItem.DetailAddress ? bussinessItem.DetailAddress + " " : '未知 ' }}</span>
			<span>| 距您{{ $utils.distanceChange(bussinessItem.distance) }}</span>
		</p>
		<!-- 商家详情end -->

	</div>
</template>

<script>
import imgBox from 'components/imgBox'
export default {
	name: 'BussinessItem',
	components: {
		imgBox
	},
	props: {
		bussinessItem: {
			type: Object,
			default: () => ({
				ID: 1,
				Logo: '',
				Name: '',
				BusinessHours: '',
				ContactTel: '',
				TagsList: [],
				DetailAddress: '',
				distance: 0,
				isLike: true
			})
		},
		type: {
			type: String,
			default: 'alliance'
		}
	},
	data() {
		return {
			show: false
		}
	},
	watch: {},
	created() { },
	methods: {
		// 查看店铺详情
		goDetail(item) {
			console.log(this.type)
			this.$emit('goDetail', item)
			// if (this.type === 'alliance') {
			//   this.$router.push({
			//     path: '/businessDetail/' + id
			//   })
			// } else if (this.type === 'nearbyStore') {
			//   this.$router.push({
			//     path: '/nearbyStoreDetail/' + id
			//   })
			// }
		},
		goInfo(item){
			console.log(item)

			this.$router.push('/businessInfo/' + item.ID)
		},
		like() {
			this.bussinessItem.isLike = !this.bussinessItem.isLike
		},
		navigation(event) {
			// 打开导航
			this.$emit('navigation')
		}
	}
}
</script>

<style lang="scss" scoped>
.alliance {
	margin-bottom: 10px;

	.max-width {
		max-width: 414px;
		padding: 0 10px;
	}
}

.distance {
	width: 115px;
	text-align: right;
}

.nearbyStore {
	margin-bottom: 20px;

	.name-box {
		max-width: calc(100% - 112px);
	}
}

.nearbyStore,
.detail,.info {
	.max-width {
		max-width: 530px;
		padding-left: 20px;
	}
}
.max-height {
	overflow: hidden;
	max-height: 78px;
}

.isLike,
.notLike {
	font-size: 24px;
	height: 48px;
	line-height: 48px;
	padding: 0 30px;
}

.notLike {
	@include bg-primary();
	border: none;
}

.isLike {
	@include color-primary();
	border: 1px solid currentColor;
	line-height: 44px;
}

.arrow:after {
	right: 35px;
	top: 10px;
}
</style>
